<template>
  <div class="wrapper">
    <v-new-header></v-new-header>
    <v-menu></v-menu>
    <el-row class="update-history">
      <el-col :span="24" class="con-span">
        <span class="title" @click="showHistory">更新历史</span>
      </el-col>
    </el-row>
    <div class="content">
      <transition name="move" mode="out-in"><router-view></router-view></transition>
    </div>
    <el-dialog
      title="系统更新历史记录"
      :visible.sync="centerDialogVisible"
      width="80%"
      height="80%"
      center>
        <el-card class="box-card" v-for="(record,index) in historyList" :key="index" >
          <div slot="header" class="clearfix">
            <h2>{{record.date}}</h2>
          </div>
          <div  class="text item" >
            <el-row v-for="(h,i) in record.arr" :key="i" style="line-height:35px;">
              <el-col :span="1">
                <el-tag type="info" size="medium" :color="h.type =='new' ? '#1e75c3' : '#fb8d50'" style="color:#fff;">{{h.type =='new' ? '新增' : '优化'}}</el-tag>
              </el-col>
              <el-col :span="23">
                <span v-html="h.content" style="padding-left:15px;"></span>
              </el-col>
            </el-row>
            <dd ></dd>
          </div>
        </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import axios from "axios";
import vMenu from "./Menu.vue";
import vNewHeader from "./NewHeader.vue";
export default {
  data() {
    return {
      centerDialogVisible: false,
      historyList: []
    };
  },
  components: {
    vMenu,
    vNewHeader
  },
  computed: {
    ...mapGetters(["istourism"])
  },
  created() {
    this.$store
      .dispatch("loginGetUserInfo", { flag: this.istourism })
      .then(res => {}, error => {});
  },
  methods: {
    showHistory() {
      axios
        .get("/static/update_record.json")
        .then(response => {
          this.historyList = response.data.allRecord;
          this.centerDialogVisible = true;
        })
        .catch(err => {
          this.$message({
            showClose: true,
            message: "返回值错误！",
            type: "error"
          });
        });
    }
  }
};
</script>

<style scoped>
.content {
  background: none repeat scroll 0 0 #fff;
  position: absolute;
  left: 250px;
  right: 0;
  top: 70px;
  bottom: 0;
  width: auto;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.update-history {
  position: absolute;
  bottom: 20px;
}
.update-history .con-span {
  text-align: center;
  width: 235px;
}
.update-history .con-span .title {
  width: 100%;
  color: #fff;
  cursor: pointer;
}
</style>
